import React, { Component } from 'react'
import * as Actions from '../stateFactory/Actions'
import {connect} from 'react-redux'
// 傻瓜式组件，只用来展示
class Counter extends Component {
  render () {
    const {caption, onClickIncrementButton, onClickDecrementButton, value} = this.props
    return (
      <div>
        <button onClick={onClickIncrementButton}>+</button>
        <button onClick={onClickDecrementButton}>-</button>
        <span>{caption} Count: {value}</span>
      </div>
    )
  }
}
function mapStateToProps(state, ownProps) {
  return {
    value: state[ownProps.caption]
  }
}
function mapDispatchToProps(dispatch, ownProps) {
  return {
    onClickIncrementButton: () => {
      dispatch(Actions.increment(ownProps.caption))
    },
    onClickDecrementButton: () => {
      dispatch(Actions.decrement(ownProps.caption))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter)
